<template>
	<section class="brs">
		<section class="brs-header">
			<section class="brs-header-logo">{{ systemStore.title }}</section>
			<section class="brs-header-tabs">
				<brs-tabs></brs-tabs>
			</section>
			<section class="brs-header-actions-info">
				<a-dropdown>
					<span>
						管理员
						<DownOutlined />
					</span>
					<template #overlay>
						<a-menu @click="dropdownHandle">
							<a-menu-item key="user-info">
								<span>个人资料</span>
							</a-menu-item>
							<a-menu-item key="change-password">
								<span>修改密码</span>
							</a-menu-item>
							<a-menu-divider />
							<a-menu-item key="logout">
								<span>退出登录</span>
							</a-menu-item>
						</a-menu>
					</template>
				</a-dropdown>
			</section>
		</section>
		<section class="brs-container" :style="{ ...background }">
			<section class="brs-left">
				<div class="collapse" @click="menuStore.setCollapse(!collapse)">
					<menu-fold-outlined v-if="!collapse" />
					<menu-unfold-outlined v-else />
				</div>
				<div class="brs-menu" :class="{ fold: collapse }">
					<brs-menu></brs-menu>
				</div>
			</section>
			<section class="brs-content">
				<router-view></router-view>
			</section>
		</section>
	</section>
</template>

<script lang="ts" setup>
	import { useMenuStore } from '@/store/menuStore';
	import { DownOutlined } from '@ant-design/icons-vue';
	import { computed } from 'vue';
	import brsMenu from './brs-menu/index.vue';
	import brsTabs from './brs-tabs/index.vue';
	import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
	import { useRouter } from 'vue-router';
	import { useSystemStore } from '@/store/systemStore';
	const systemStore = useSystemStore();
	const menuStore = useMenuStore();
	const router = useRouter();
	const collapse = computed(() => menuStore.collapse);
	const borderShadowColor = computed(() => systemStore.borderShadowColor);
    const background = computed(()=>{
        if(systemStore.background.indexOf('http') === 0){
            return {
                backgroundImage: `url(${systemStore.background})`,
                backgroundRepeat: 'no-repeat',
                backgroundSize: 'cover'
            }
        }
        return {
            backgroundColor: systemStore.background || '#f9f9fc'
        }
    })

	const dropdownHandle = async ({ key }: { key: string }) => {
		if (key === 'user-info') {
			router.push('/user/user-info');
		}
		if (key === 'change-password') {
			router.push('/user/change-password');
		}
		if (key === 'logout') {

		}
	};
</script>

<style lang="less" scoped>
	.brs {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		--borderShadowColor: v-bind(borderShadowColor);
		&-header {
			display: flex;
			align-items: center;
			height: 55px;
			padding: 0 @space;
			background-color: #fff;
			position: relative;
			z-index: 20;
			box-shadow: 0 2px 8px var(--borderShadowColor);
			&-logo {
				font-size: 28px;
				font-weight: bold;
				color: var(--ant-primary-color);
			}
			&-tabs {
				height: 100%;
				flex: 1;
				margin: 0 @space;
			}
		}
		&-container {
			position: relative;
			z-index: 10;
			flex: 1;
			padding: @space;
			overflow: hidden;
			display: flex;
			background-repeat: no-repeat;
			background-size: cover;

			.collapse {
				width: 80px;
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0 2px 8px var(--borderShadowColor);
				margin-bottom: 20px;
			}
			.brs-menu {
				min-width: 80px;
				width: 220px;
				margin-right: @space;
				transition: 0.3s all;
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0 2px 8px var(--borderShadowColor);
				overflow: hidden;
				&.fold {
					width: 80px;
				}
			}
			.brs-content {
				height: 100%;
				flex: 1;
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0 2px 8px var(--borderShadowColor);
				overflow: hidden;
			}
		}
	}
</style>
